<!-- src/pages/news/index.vue -->

<template>
  <div>
  <div class="news-container">
    <div class="news-header">
      <div class="news-title">{{ news.title }}</div>
      <div class="news-meta">{{ news.createTime }}</div>
    </div>
    <div class="news-description">
      <div class="description-title">资讯概述</div>
      <div class="description-content">
        {{news.description}}
      </div>
    </div>
    <div class="news-content" v-html="news.content">{{ news.content }}</div>
    <div class="page-footer">
      <div class="footer-content" @mouseover="hoverFooter(true)" @mouseout="hoverFooter(false)">
        <p>更多精彩内容尽在我们的网站</p>
        <a :style="{ color: footerTextColor }" href="https://example.com">访问我们的网站</a>
      </div>
    </div>
  </div>
  <!-- 一键回到顶部按钮 -->
  <img class="back-to-top" @click="backToTop" src="/static/images/置顶图片.png">

  </div>
</template>

<script>
import config from './'
export default {
  onLoad(option) {
    // 在这里通过小程序的API获取新闻详情数据，可以通过参数传递新闻ID等信息
    console.log(JSON.parse(option.data));
    this.news = JSON.parse(option.data);
  },
  data() {
    return {
      footerTextColor: '#fff',
      news: {
      }
    };
  },
  methods: {

    hoverFooter(isHovered) {
      this.footerTextColor = isHovered ? '#3498db' : '#fff';
    },
    // 一键回到顶部的方法
    backToTop() {
      // 使用小程序的API回到顶部
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300 // 滚动时间
      });
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.news-container
  max-width: 800px
  margin: 20px auto
  background-color: #fff
  padding: 20px
  border-radius: 8px
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)

.news-header
  margin-bottom: 20px

.news-title
  font-size: 21px
  font-weight: bold
  color: #333

.news-meta
  color: #666
  font-size: 14px
  margin-top: 5px

.news-content
  padding-top: 10px;
  font-size: 16px
  line-height: 1.6

.news-description
  margin-top: 20px
  padding: 20px
  background-color: #f1f1f1
  border: 1px solid #ddd
  border-radius: 8px

.description-title
  font-size: 24px
  font-weight: bold
  color: #3498db
  margin-bottom: 10px

.description-content
  font-size: 14px
  line-height: 1.6
  color: #555

.page-footer
  margin-top: 30px
  text-align: center

.footer-content
  background-color: #3498db
  padding: 20px
  border-radius: 8px
  transition: background-color 0.3s

.page-footer p
  color: #fff
  font-size: 14px
  margin: 0

.page-footer a
  font-size: 16px
  text-decoration: none
  display: block
  margin-top: 10px;

.back-to-top
  position: fixed
  width: 13%
  height 7%
  right: 20px
  bottom: 20px
  border #7692e2
  border-style: double
  border-radius: 100px
  cursor: pointer
  transition: background-color 0.3s



</style>
